<template>
  <div id="app">
    <!-- 头部 -->
    <ToBar :key="tobarkey"></ToBar>
    <!-- 导航 -->
    <Header></Header>
    <!-- 内容 -->
    <router-view @aaa="bbb" />
    <!-- 底部 -->
    <Footer></Footer>
    <!-- 登录框 -->
    <Login v-show="loginshow"></Login>
    <!-- 提示框 -->
    <transition name="slide">
      <Toast v-show="toastshow"></Toast>
    </transition>
  </div>
</template>

<script>
import Footer from "./components/Footer.vue";
import ToBar from "./components/ToBar.vue";
import Header from "./components/Header.vue";
import Login from "./components/Login.vue";
import Toast from "./components/Toast.vue";

// import axios from "./request/request";
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      tobarkey: 0,
    };
  },
  methods: {
    ...mapMutations({
      changisLoginshow: "loginstate/changisLoginshow",
    }),
    // 子传父自定义事件
    bbb() {},
  },
  components: {
    Footer,
    ToBar,
    Header,
    Login,
    Toast,
  },
  async created() {
    //   // 缺点：
    //   // 1.服务器url地址都一样，每个组件调用时都需要复制过去，
    //   // 2.一旦接口地址发生变化，所有调用了接口的组件都需要修改
    //   // 3.每次请求时都需要手动编写config携带token(多个组件携带代码重复)
    //   // 4.优化then()写法  async await
    //   // tuijianApi().then((res) => {
    //   //   console.log(res);
    //   // });
    // let res = await tuijianApi();
    //   // console.log(res);
    // 判断登陆状态
    //   let token = localStorage.getItem("token");
    //   if (token) {
    //     this.changisLoginshow(true);
    //   }
    console.log(process.env.VUE_APP_MY_NAME);
  },

  computed: {
    ...mapState({
      loginshow: (state) => state.loginshow.show,
      toastshow: (state) => state.showToast.toastshow,
    }),
  },
  // 组件重载
  // watch: {
  //   "$route.path": {
  //     handler(newV, old) {
  //       if (newV != old) {
  //         this.tobarkey++;
  //       }
  //     },
  //   },
  // },
};
</script>


<style lang="less">
#app {
  // background-color: #0c0;
}

.slide-enter,
.slide-leave-to {
  opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
  transition: opacity 0.3s linear;
}

.slide-enter-to,
.slide-leave {
  opacity: 1;
}
</style>
